<template>
  <view class="goodCate">
    <view class="header acea-row row-center-wrapper">
      <navigator open-type="switchTab" url="/pages/index/index" @click="jumpIndex"
                 class="pageIndex acea-row row-center-wrapper" hover-class="none">
        <text class="iconfont icon-fanhuishouye"></text>
      </navigator>
      <navigator url="/pages/goods/goods_search/index" class="search acea-row row-middle" hover-class="none">
        <text class="iconfont icon-sousuo5"></text>
        搜索商品名称
      </navigator>
    </view>
    <view class="conter">
      <view class="aside">
        <scroll-view scroll-y="true" scroll-with-animation="true" style="height: calc(100% - 100rpx)">
          <view class="item acea-row row-center-wrapper" :class="index == navActive ? 'on' : ''"
                v-for="(item, index) in categoryList" :key="index" @click="tapNav(index, item)">
            <text>{{ item.type_title }}</text>
          </view>
        </scroll-view>
      </view>
      <view class="wrapper">
        <view class="bgcolor" v-if="iSlong">
          <view class="longTab acea-row row-middle">
            <scroll-view scroll-x="true" style="white-space: nowrap; display: flex; height: 44rpx" scroll-with-animation
                         :scroll-left="tabLeft" show-scrollbar="true">
              <view
                  class="longItem"
                  :style="'width:' + isWidth + 'px'"
                  :class="index === tabClick ? 'click' : ''"
                  v-for="(item, index) in categoryErList"
                  :key="index"
                  @click="longClick(index)"
              >
                {{ item.type_title }}
              </view>
            </scroll-view>
          </view>
          <view class="openList" @click="openTap">
            <text class="iconfont icon-xiangxia"></text>
          </view>
        </view>
        <view v-else>
          <view class="downTab">
            <view class="title acea-row row-between-wrapper">
              <view>{{ categoryTitle }}</view>
              <view class="closeList" @click="closeTap">
                <text class="iconfont icon-xiangxia"></text>
              </view>
            </view>
            <view class="children">
              <view class="acea-row row-middle">
                <view class="item line1" :class="index === tabClick ? 'click' : ''"
                      v-for="(item, index) in categoryErList" :key="index" @click="longClick(index)">
                  {{ item.type_title }}
                </view>
              </view>
            </view>
          </view>
          <view class="mask" @click="closeTap"></view>
        </view>
        <scroll-view
            scroll-y="true"
            scroll-with-animation="true"
            :scroll-top="0"
            @scroll="scroll"
            :style="{ height: scrollHeight * 2 + 'rpx' }"
            :lower-threshold="50"
            @scrolltolower="productslist"
        >
          <goodClass ref="goodClass" :tempArr="tempArr" @detail="goDetail"></goodClass>
          <view class="loadingicon acea-row row-center-wrapper">
            <text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
            {{ loadTitle }}
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import {getCategoryList, getProductslist} from "@/apis/store";
import goodClass from '@/components/goodClass/index.vue';

let windowHeight = uni.getSystemInfoSync().windowHeight;
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
  components: {
    goodClass,
  },
  data() {
    return {
      categoryList: [],
      navActive: 0,
      categoryErList: [],
      tabLeft: 0,
      iSlong: true,
      isWidth: 0, //每个导航栏占位
      tabClick: 0, //导航栏被点击
      loading: false,
      loadend: false,
      tempArr: [],
      loadTitle: '加载更多',
      page: 1,
      limit: 10,
      cid: 0, //一级分类
      sid: 0, //二级分类
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      scrollHeight: 0,
    };
  },
  created() {
    let that = this;
    that.getAllCategory(1)


  },
  methods: {
    getAllCategory(type) {
      let that = this;
      getCategoryList().then((res) => {
        let data = res.data;
        data.forEach((item) => {
          item.children.unshift({
            type_id: 0,
            type_title: '全部'
          });
        });
        that.categoryTitle = data[0].type_title
        that.cid = data[0].id;
        that.sid = 0;
        that.navActive = 0;
        that.tabClick = 0;
        that.categoryList = data;
        that.page = 1;
        that.loadend = false;
        that.tempArr = [];
        that.categoryErList = res.data[0].children ? res.data[0].children : [];
        that.productslist();
      })
    },
    openTap() {
      this.iSlong = false;
    },
    closeTap() {
      this.iSlong = true;
    },
    tapNav(index, item) {
      let list = this.categoryList[index]
      this.navActive = index;
      this.categoryTitle = list.type_title;
      this.categoryErList = item.children ? item.children : [];
      this.tabClick = 0;
      this.tabLeft = 0;
      this.cid = list.type_id;
      this.sid = 0;
      this.page = 1;
      this.loadend = false;
      this.tempArr = [];
      this.productslist();
    },
    //导航栏点击
    longClick(index) {
      if (this.categoryErList.length > 3) {
        this.tabLeft = (index - 1) * (this.isWidth + 6); //设置下划线位置
      }
      this.tabClick = index; //设置导航点击了哪一个
      this.iSlong = true;
      this.sid = this.categoryErList[index].type_id;
      this.page = 1;
      this.loadend = false;
      this.tempArr = [];
      this.productslist();
    },
    productslist: function () {
      let that = this;
      if (that.loadend) return;
      if (that.loading) return;
      that.loading = true;
      that.loadTitle = '';
      getProductslist({
        page: that.page,
        limit: that.limit,
        type: 1,
        cid: that.cid,
        sid: that.sid
      }).then((res) => {
        let list = res.data, loadend = list.length < that.limit;
        that.tempArr = that.$util.SplitArray(list, that.tempArr);
        that.$set(that, 'tempArr', that.tempArr);
        that.loading = false;
        that.loadend = loadend;
        that.loadTitle = loadend ? `没有更多内容啦~` : `加载更多`;
        that.page == 1 && this.goTop();
        that.page = that.page + 1;
      }).catch((err) => {
        (that.loading = false), (that.loadTitle = `加载更多6666`);
      });
    },
    scroll(e) {
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop(e) {
      // 解决view层不同步的问题
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0;
      });
    }
  },
  mounted() {
    let that = this
    uni.getSystemInfo({
      success(e) {
        that.isWidth = e.windowWidth / 5;
      }
    });
    setTimeout(() => {
      this.scrollHeight = windowHeight - 80 - sysHeight;
    }, 1000);
  },
}
</script>

<style lang="scss">
/deep/ .mask {
  z-index: 99;
}

page {
  background-color: #fff;
}

/deep/ .product-window.joinCart {
  z-index: 999;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}

.goodCate {
  /deep/ .mask {
    z-index: 99;
  }

  /deep/ .attrProduct {
    .mask {
      z-index: 100;
    }
  }

  .header {
    position: fixed;
    height: 128rpx;
    background-color: #fff;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    border-bottom: 1px solid #eee;
    padding: 0 28rpx;

    .pageIndex {
      width: 68rpx;
      height: 68rpx;
      border-radius: 50%;
      background-color: rgba(29, 176, 252, 1);

      .iconfont {
        color: #fff;
        font-size: 30rpx;
      }

      // image{
      // 	width: 29rpx;
      // 	height: 30rpx;
      // }
    }

    .search {
      width: 600rpx;
      height: 68rpx;
      border-radius: 36rpx;
      background-color: #f7f7f7;
      font-size: 26rpx;
      color: #cccccc;
      margin-left: 22rpx;
      padding: 0 30rpx;
      box-sizing: border-box;

      .iconfont {
        font-size: 30rpx;
        margin-right: 18rpx;
        color: #666666;
      }

      // image{
      // 	width: 27rpx;
      // 	height: 27rpx;
      // 	margin-right: 18rpx;
      // }
    }
  }

  .conter {
    margin-top: 128rpx;
    // height: 100vh;
    background-color: #fff;
    position: relative;

    .aside {
      position: fixed;
      width: 23%;
      left: 0;
      bottom: 0;
      top: 0;
      background-color: #f7f7f7;
      overflow-y: auto;
      overflow-x: hidden;
      margin-top: 128rpx;
      z-index: 99;
      padding-bottom: 140rpx;

      .item {
        height: 100rpx;
        width: 100%;
        font-size: 26rpx;
        color: #333333;

        &.on {
          background-color: #ffffff;
          width: 100%;
          text-align: center;
          color: rgba(29, 176, 252, 1);
          font-weight: 500;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            width: 6rpx;
            height: 46rpx;
            background: rgba(29, 176, 252, 1);
            border-radius: 0 4rpx 4rpx 0;
            left: 0;
          }
        }
      }
    }

    .wrapper {
      position: fixed;
      top: 232rpx;
      right: 0;
      width: 77%;
      float: right;
      background-color: #ffffff;
      overflow: hidden;

      .bgcolor {
        width: 100%;
        background-color: #ffffff;
      }

      .goodsList {
        margin-top: 0 !important;
      }

      .mask {
        z-index: 9;
      }

      .longTab {
        width: 65%;
        position: fixed;
        top: 128rpx;
        height: 100rpx;
        z-index: 99;
        background-color: #ffffff;

        .longItem {
          height: 44rpx;
          display: inline-block;
          line-height: 44rpx;
          text-align: center;
          font-size: 26rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #333333;
          background-color: #f7f7f7;
          border-radius: 22rpx;
          margin-left: 12rpx;

          &.click {
            font-weight: bold;
            background-color: rgba(29, 176, 252, 1);
            color: #ffffff;
          }
        }

        .underlineBox {
          height: 3px;
          width: 20%;
          display: flex;
          align-content: center;
          justify-content: center;
          transition: 0.5s;

          .underline {
            width: 33rpx;
            height: 4rpx;
            background-color: #ffffff;
          }
        }
      }

      .openList {
        width: 12%;
        height: 100rpx;
        background-color: #ffffff;
        line-height: 100rpx;
        padding-left: 30rpx;
        position: fixed;
        right: 0;
        top: 128rpx;
        z-index: 99;

        .iconfont {
          font-size: 22rpx;
          color: #666666;
        }
      }

      .downTab {
        width: 77%;
        position: fixed;
        top: 0;
        margin-top: 128rpx;
        z-index: 99;
        background-color: #ffffff;
        right: 0;

        .title {
          height: 100rpx;
          font-size: 26rpx;
          color: #999999;
          padding-left: 20rpx;

          .closeList {
            width: 90rpx;
            height: 100%;
            line-height: 100rpx;
            padding-left: 30rpx;
            transform: rotate(180deg);

            .iconfont {
              font-size: 22rpx;
              color: #666666;
            }
          }
        }

        .children {
          max-height: 500rpx;
          overflow-x: hidden;
          overflow-y: auto;
          padding-bottom: 20rpx;

          .item {
            height: 60rpx;
            background-color: #f7f7f7;
            border-radius: 30rpx;
            line-height: 60rpx;
            padding: 0 15rpx;
            margin: 0 0 20rpx 20rpx;
            width: 165rpx;
            text-align: center;

            &.click {
              font-weight: bold;
              background-color: rgba(29, 176, 252, 1);
              color: #ffffff;
            }
          }
        }
      }

      .goodsList {
        margin-top: 228rpx;
        padding: 0 20rpx 0 20rpx;

        /deep/ .item {
          margin-bottom: 33rpx !important;

          // .pictrue {
          // 	height: 216rpx;
          // }

          .text {
            font-size: 26rpx;
          }

          .bottom {
            padding-right: 18rpx;

            .sales {
              .money {
                font-size: 34rpx;

                text {
                  font-size: 26rpx;
                }
              }
            }

            .cart {
              .pictrue {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }
        }
      }
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    box-shadow: 0px -3px 16px rgba(36, 12, 12, 0.05);
    z-index: 101;
    box-sizing: border-box;
    padding: 12rpx 30rpx;
    padding-bottom: calc(12rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
    padding-bottom: calc(12rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
    .cartIcon {
      width: 124rpx;
      height: 106rpx;
      position: relative;
      margin-top: -64rpx;

      .iconfont {
        font-size: 100rpx;
        color: rgba(29, 176, 252, 1);
      }

      .num {
        min-width: 12rpx;
        color: rgba(29, 176, 252, 1);
        border-radius: 15px;
        position: absolute;
        right: 0;
        font-size: 16rpx;
        padding: 0 11rpx;
        background-color: #fff;
        height: 36rpx;
        line-height: 34rpx;
        top: 24rpx;
        border: 1rpx solid rgba(29, 176, 252, 1);
      }
    }

    .money {
      font-size: 26rpx;
      font-weight: bold;
      color: var(--view-priceColor);
      margin-right: 34rpx;

      .num {
        font-size: 34rpx;
      }
    }

    .bnt {
      width: 222rpx;
      height: 76rpx;
      background-color: rgba(29, 176, 252, 1);
      border-radius: 46px;
      line-height: 76rpx;
      text-align: center;
      color: #fff;
      font-size: 28rpx;
      margin-right: 30rpx;

      &.on {
        background: #bbbbbb;
      }
    }
  }
}
</style>
